<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link rel="stylesheet" th:href="@{/css/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <script th:src="@{/js/bootstrap4.1.3.main.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.js}"></script>
    <link th:href="@{/css/userlogin.css}" rel="stylesheet">
    <link th:href="@{/css/waiting.css}" rel="stylesheet">
    <title>Login/Signup page</title>
</head>
<body>
<h1>停车场系统</h1>
<h2>登录 / 注册</h2>
<div class="container" id="container">
    <div class="form-container sign-up-container">
        <form id="enroll" method="post">
            <h3>注册</h3>
            <input id="stel" name="tel" placeholder="手机号" required type="text">
            <input id="spwd" name="pwd" placeholder="密码(6-18位字母和数字的组合)" required type="password">
            <input id="sspwd" name="spwd" placeholder="确认密码" required type="password">
            <select id="enr" name="uType">
                <option value="次卡">注册为次卡用户</option>
                <option value="月卡">注册为月卡用户</option>
            </select>
            <input id="SverifyCode" name="verifyCode" placeholder="验证码" required type="text">
            <img id="SverifyCodeImg" onclick="refreshSVerifyCode();" title="点击刷新">
            <span>点击刷新</span>
            <strong style="height: 20px;margin-bottom: 5px"><span id="SUError" style="color:red;visibility:hidden;font-size: 15px;height: 20px;"></span></strong>
            <button id="signbtn" type="button">注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form id="login" method="post">
            <h3>登录</h3>
            <input id="lname" name="tel" placeholder="手机号" required type="text">
            <input id="lpwd" name="pwd" placeholder="密码" required type="password">
            <input id="verifyCode" name="verifyCode" placeholder="验证码" required type="text">
            <img id="verifyCodeImg" onclick="refreshVerifyCode();" title="点击刷新">
            <span>点击刷新</span>
            <div style="display: flex;align-items: center;width: 200px;">
                <input type="checkbox" name="rememberMe" id="rem" style="margin-left: -30px">
                <label for="rem" style="width:70%;margin-left: -130px;font-size: 15px"><strong>记住我</strong></label>
            </div>
            <strong style="height: 20px;margin-bottom: 5px"><span id="LUError" style="color:red;visibility:hidden;font-size: 15px;height: 20px;"></span></strong>
            <button id="loginbtn" type="button">登录</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>欢迎回来!</h1>
                <p>
                    登录私人账号，进入停车系统！
                </p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>你好，朋友 !</h1>
                <p>注册个人账号，进入停车系统</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<div id="app" style="display: none;">
    <div class="first-loading-wrp">
        <div class="loading-wrp">
        <span class="dot dot-spin">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </span>
        </div>
        <h2>登录成功!</h2>
        <h2>正在进入系统...</h2>
    </div>
</div>
<input style="display: none" th:value="${Result?.msg}" id="msg">
<footer>
    <p>
        Creat by <a href="https://gitee.com/sun-fei-00" target="blank">SZ</a>
    </p>
</footer>
<script th:src="@{/js/userlogin.js}"></script>
</body>
</html>